<template>
  <view class="my-page">
    <!-- 顶部留白 -->
    <view class="top-space">
      
      <!-- 个人信息部分 -->
      <view class="user-info">
        <image class="user-avatar" src="/static/avatar.png" mode="aspectFill"></image>
        <view class="user-details">
          <text class="user-nickname">用户昵称</text>
          <text class="user-signature">个性签名</text>
        </view>
      </view>
    </view>


    <!-- 动态、关注、粉丝模块 -->
    <view class="stats">
      <view class="stat-item">
        <text class="stat-number">0</text>
        <text class="stat-label">动态</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">0</text>
        <text class="stat-label">关注</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">0</text>
        <text class="stat-label">粉丝</text>
      </view>
    </view>

    <!-- 六个带圆角的小框 -->
    <view class="menu-items">
      <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuItemClick(item)">
        <text>{{ item.name }}</text>
        <text class="arrow-right"></text>
      </view>
    </view>
    <!-- 退出登录按钮 -->
    <button class="logout-btn" @click="handleAuth">{{ isLogin ? '退出登录' : '登录' }}</button>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore()

// 判断是否登录
const isLogin = computed(() => !!memberStore.profile?.token)

// 登录/退出按钮点击事件
const handleAuth = () => {
  if (isLogin.value) {
    // 退出登录
    memberStore.clearProfile()
    uni.showToast({
      title: '退出登录成功',
      icon: 'success'
    })
  } else {
    // 跳转到登录页
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }
}
// Menu item list
const menuList = ref([
  { name: '编辑信息' },
  { name: '菜单2' },
  { name: '菜单3' },
  { name: '菜单4' },
  { name: '菜单5' },
  { name: '设置' },
]);

// Function to handle menu item clicks
const handleMenuItemClick = (item) => {
  if (item.name === '编辑信息') {
    uni.navigateTo({
      url: '/pagesMy/profile/profile'
    });
  }
  if (item.name === '设置') {
    uni.navigateTo({
      url: '/pagesMy/settings/settings'
    });
  }
};
</script>

<style lang="scss" scoped>
.my-page {
  height: 100vh;
  background-color: #f5f5f5;
}

.top-space {
  background-image: url('/static/avatar.png');
  height: 50vh;
  position: relative; /* Set the position to relative */
  overflow: hidden; /* Hide the overflow part of the image */
   /* You can keep the original background color as a fallback */
}

.top-space-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 20rpx;
  align-items: center;
  background-color: rgba(255, 231, 231, 0.778);
}

.user-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

.user-details {
  display: flex;
  margin-left: 30rpx;
  flex-direction: column; 
}

.user-nickname {
  font-size: 36rpx;
  font-weight: bold;
  color:#ff4444;
}

.user-signature {
  font-size: 28rpx;
  color: #666;
}

.stats {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
  background-color: white;
  margin-top: 20rpx;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}

.stat-label {
  font-size: 28rpx;
  color: #666;
}

.menu-items {
  margin-top: 20rpx;
  background-color: white;
  color:#666;
  border: 1rpx solid white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10rpx;
  
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 3rpx solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.menu-item:not(:last-child) {
  border-bottom: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 10rpx solid transparent;
  border-bottom: 10rpx solid transparent;
  border-left: 10rpx solid #666;
  
}

.logout-btn {
  margin: 30rpx 30rpx;
  background-color: #ff4444;
  color: white;
  border-radius: 10rpx;
}
</style>